import React, { useRef } from 'react';
import { ProTable } from '@ant-design/pro-components';
import { Button, Input, Form, Select, Table } from 'antd';
import { useDispatch, history } from 'umi';
function Business(props: any) {
  const { columns, data, count } = props;
  console.log(count);
  const actionRef = useRef();
  const dispatch = useDispatch();
  const onFinish = (values: any) => {
    console.log(values);
    dispatch({
      type: 'business/SEARCH',
      payload: {
        ...values,
        count,
      },
    });
  };
  return (
    <React.Fragment>
      <Form
        style={{
          width: '100%',
          height: '50px',
          background: 'rgba(242,242,242)',
          lineHeight: '50px',
          borderLeft: '5px solid rgba(0,150,136)',
          display: 'flex',
        }}
        onFinish={onFinish}
      >
        <Form.Item
          label="状态"
          name="status"
          style={{ marginTop: '10px', marginLeft: '20px' }}
        >
          <Select
            defaultValue="-所有-"
            style={{ width: 90 }}
            options={[
              { value: '-所有-', label: '-所有-' },
              { value: '正常', label: '正常' },
              { value: '禁用', label: '禁用' },
            ]}
          />
        </Form.Item>
        <Form.Item
          label="关键词"
          name="title"
          style={{ marginTop: '10px', marginLeft: '20px' }}
        >
          <Input />
        </Form.Item>
        <Form.Item
          wrapperCol={{ offset: 8, span: 16 }}
          style={{ marginTop: '10px', marginLeft: '20px' }}
        >
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
        </Form.Item>
      </Form>
      <ProTable<any>
        columns={columns}
        dataSource={data}
        dateFormatter="string"
        actionRef={actionRef}
        search={false}
        cardBordered
        pagination={{
          showQuickJumper: true,
          pageSize: 10,
        }}
        toolbar={{
          actions: [
            <Button
              key="primary"
              type="primary"
              onClick={() => {
                history.push('/home/business/buildIndex/addbusiness', {
                  count,
                });
              }}
            >
              添加
            </Button>,
          ],
        }}
        editable={{
          type: 'multiple',
        }}
        rowKey="id"
        rowSelection={{
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        }}
      />
    </React.Fragment>
  );
}

export default Business;
